<template>
  <div>
    <div>
      <div class="flex-col page">
        <c-title :hide="false" text="团队订单"></c-title>
        <div class="flex-col relative section">
          <div class="flex-col">
            <div class="flex-col self-stretch">
              <div class="flex-row justify-between items-center section_2">
                <div class="flex-row items-center flex-1">
                  <img class="shrink-0 image_4" src="https://ide.code.fun/api/image?token=6719b911c471750012dcd82c&name=d9c9f03668bbf5789fc74c95d22bd5d8.png" />
                  <input type="text" v-model="userId" class="ml-6 font_2 text_3 flex-row flex-1" placeholder="请输入用户ID" />
                </div>
                <div @click="searchOrder" class="flex-col justify-start items-center text-wrapper_2"><span class="font_2 text_4">搜索</span></div>
              </div>
              <div class="flex-row equal-division mt-15">
                <div class="flex-col items-center equal-division-item group_3 flex-1 bd-r-white">
                  <span class="font_3 text_5">{{ total }}</span>
                  <span class="font_4 text_8 mt-11">订单总数(个)</span>
                </div>
                <!-- <div class="horiz-divider section_3 ml-9"></div> -->
                <div class="flex-col items-center equal-division-item group_4 ml-9 flex-1">
                  <div class="group_5">
                    <span class="font_3 text_6">{{ money }}</span>
                    <!-- <span class="text_7">.00</span> -->
                  </div>
                  <span class="font_4 text_9 mt-11">订单总金额(元）</span>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="flex-col justify-start items-center text-wrapper pos"><span class="text">9:41</span></div> -->
        </div>
        <div class="flex-col list">
          <div class="flex-col list-item mt-15" v-for="(item, index) in list" :key="index">
            <div class="flex-row justify-between group_6 items-start">
              <div class="group_7 flex-row flex-1">
                <span class="font_2">订单编号：</span>
                <span class="font_5">{{ item.order_sn }}</span>
              </div>
              <div class="flex-row items-center">
                <img class="shrink-0 image_5" src="https://ide.code.fun/api/image?token=6719b911c471750012dcd82c&name=3ec85c9d737ee8631122d4891ea983d0.png" />
                <span class="font_6 ml-5">{{ item.created_at }}</span>
              </div>
            </div>
            <div class="divider view"></div>
            <div class="flex-row justify-between items-center group_8 view_2">
              <div class="flex-row items-center flex-1">
                <span class="font_2">下单人：</span>
                <img class="shrink-0 image_6" :src="item.member_info ? item.member_info.avatar : ''" />
                <span class="font_7 text_10">{{ item.member_info ? item.member_info.nickname : '' }}</span>
                <span v-if="item.member_info.level_name != ''" class="store-manager-btn">{{ item.member_info.level_name }}</span>
              </div>
              <div class="flex-row items-center">
                <span class="font_2">用户ID：</span>
                <span class="font_6 text_11">{{ item.member_info ? item.member_info.uid : '' }}</span>
              </div>
            </div>
            <div class="flex-row group_9" v-for="(items,indexs) in item.order_goods" :key="indexs">
              <img class="shrink-0 image_7" :src="items.thumb" />
              <div class="ml-10 flex-col items-start flex-1 group_10">
                <span class="font">{{ items.title }}</span>
                <span class="mt-12 font_2 text_12">商品规格：{{ items.goods_option_title }}</span>
                <span class="mt-12 font_8">¥{{ items.price }}</span>
              </div>
              <span class="ml-10 self-start font_9 text_13">X{{ items.total }}</span>
            </div>
            <div class="divider view_3"></div>
            <div class="flex-row group_11">
                <div v-if="item.daili != ''" class="flex-row flex-1 justify-start">
                    <span class="font_2 text_14">代理商：</span>
                    <span class="font_7 text_15">{{ item.daili }}</span>
                </div>
                <div v-if="item.shezhang != ''" class="flex-row flex-1 justify-end">
                    <span class="font_2 text_14">社长：</span>
                    <span class="font_7 text_15">{{ item.shezhang }}</span>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import memberOrderController from "./memberOrderController";

export default memberOrderController;
</script>
  
  
<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-nav-bar {
  border-bottom: none !important;
  background: #d0e3f6 !important;
}
::v-deep .van-button--default {
  background: none !important;
}
::v-deep .van-nav-bar__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #151515 !important;
}
@import "../../../assets/css/commoncss/common.css";
.mt-25 {
  margin-top: 1.56rem;
}
.ml-9 {
  margin-left: 0.56rem;
}
.mt-11 {
  margin-top: 0.69rem;
}
.mt-15 {
  margin-top: 0.94rem;
}
.ml-5 {
  margin-left: 0.31rem;
}
.page {
  padding-bottom: 2.13rem;
  background-color: #f2f7fa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 1rem 1rem 1.19rem;
  background-image: linear-gradient(180deg, #d0e3f6 0%, #ffffff 100%);
  background-color: #ffffff;
}
.group {
  padding: 0 0.25rem;
}
.image {
  width: 1.06rem;
  height: 0.69rem;
}
.image_2 {
  width: 0.94rem;
  height: 0.69rem;
}
.image_3 {
  width: 1.5rem;
  height: 0.69rem;
}
.group_2 {
  margin-top: 1.88rem;
}
.font {
  font-size: 1rem;
  font-family: PingFang SC;
  //   line-height: 0.93rem;
  text-align: left;
  color: #000000;
}
.text_2 {
  color: #151515;
  font-weight: 600;
  line-height: 0.94rem;
}
.section_2 {
  padding-left: 0.94rem;
  background-color: #ffffff;
  border-radius: 1rem;
}
.image_4 {
  width: 1.06rem;
  height: 1.06rem;
}
.text-wrapper_2 {
  padding: 0.63rem 0;
  background-color: #4894fe;
  border-radius: 1rem;
  width: 4.69rem;
  height: 2rem;
}
.equal-division {
  padding: 0.75rem 0;
  background-color: #4894fe;
  border-radius: 0.5rem;
}
.equal-division-item {
  flex: 1 1 10.19rem;
}
.bd-r-white {
    border-right: 1px solid #fff;
}
.group_3 {
  padding: 0.75rem 2.5rem 0.25rem;
}
.font_3 {
  font-size: 1.13rem;
  font-family: D-DIN;
//   line-height: 0.83rem;
  color: #ffffff;
}
.text_5 {
//   margin-right: 0.63rem;
  font-size: 1.19rem;
//   line-height: 0.85rem;
word-break: break-all;
}
.font_4 {
  font-size: 0.75rem;
  font-family: PingFang SC;
//   height: 100%;
//   line-height: 0.69rem;
  color: #d0e3f6;
}
.text_8 {
  line-height: 0.7rem;
}
.horiz-divider {
  margin: 0.25rem 0;
}
.section_3 {
  background-color: #ffffff99;
  width: 0.063rem;
  height: 2.63rem;
}
.group_4 {
  padding: 0.75rem 0 0.25rem;
}
.group_5 {
//   line-height: 0.85rem;
}
.text_6 {
  font-size: 1.19rem;
  word-break: break-all;
//   line-height: 0.85rem;
}
.text_7 {
  color: #ffffff;
  font-size: 0.75rem;
  font-family: D-DIN;
  line-height: 0.53rem;
}
.text_9 {
  line-height: 0.7rem;
}
.text-wrapper {
  padding: 0.25rem 0;
  border-radius: 1.5rem;
  width: 3.38rem;
}
.pos {
  position: absolute;
  left: 1.5rem;
  top: 0.75rem;
}
.text {
  color: #000000;
  font-size: 0.94rem;
  font-family: SF UI Text;
  font-weight: 600;
  line-height: 0.69rem;
}
.list {
  padding: 1rem;
}
.list-item {
  background-color: #ffffff;
  border-radius: 0.75rem;
}
.list-item:first-child {
  margin-top: 0;
}
.group_6 {
  padding: 1.06rem 0.63rem 0.75rem 0.88rem;
  border-radius: 0.25rem;
}
.group_7 {
//   line-height: 0.69rem;
//   height: 0.69rem;
}
.font_5 {
    font-size: 0.75rem;
    font-family: PingFang SC;
    /* line-height: 0.56rem; */
    color: #151515;
    // width: 60%;
    // word-break: break-all;
    text-align: left;

}
.image_5 {
  width: 0.75rem;
  height: 0.75rem;
}
.font_6 {
  font-size: 0.75rem;
  font-family: PingFang SC;
//   line-height: 0.56rem;
  color: #afb0b9;
}
.divider {
  background-color: #f4f6fa;
  height: 0.063rem;
}
.view {
  margin: 0 0.88rem;
}
.group_8 {
  padding-left: 0.88rem;
  padding-right: 0.63rem;
}
.view_2 {
  margin-top: 0.56rem;
}
.image_6 {
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}
.font_7 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  color: #151515;
}
.text_10 {
  margin-left: 0.13rem;
  line-height: 0.69rem;
  max-width: 50%;
  word-break: break-all;
  text-align: left;
}
.text_11 {
  margin-left: -0.25rem;
}
.group_9 {
  margin-top: 0.75rem;
  padding: 0 1rem;
}
.image_7 {
  border-radius: 0.5rem;
  width: 4.13rem;
  height: 4.13rem;
}
.group_10 {
  margin-bottom: 0.25rem;
}
.font_9 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  color: #afb0b9;
}
.text_13 {
  margin-right: 0.88rem;
  margin-top: 3.25rem;
  line-height: 0.64rem;
}
.view_3 {
  margin: 0.88rem 0.88rem 0;
}
.group_11 {
  padding: 0.75rem 0.88rem 1rem;
}
.text_15 {
  margin-left: -0.25rem;
  line-height: 0.69rem;
}
.font_8 {
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 0.83rem;
  color: #4894fe;
}
.font_2 {
  font-size: 0.75rem;
  font-family: PingFang SC;
//   line-height: 0.69rem;
  color: #afb0b9;
}
.text_14 {
  line-height: 0.7rem;
}
.text_12 {
//   line-height: 0.7rem;
  word-break: break-all;
}
.text_4 {
  color: #ffffff;
  line-height: 0.69rem;
}
.text_3 {
  color: #999999;
  border: none;
}
.store-manager-btn {
  margin-left: 0.1rem;
  padding: 0.13rem 0;
  background-image: linear-gradient(0deg, #fcbc30 0%, #ffe1a0 100%);
  border-radius: 0.44rem;
  width: 2.31rem;
//   height: 0.88rem;
  color: #674f1b;
  font-size: 0.63rem;
  font-family: PingFang SC;
  font-weight: 600;
//   line-height: 0.88rem;
  text-align: center;
}
</style>